import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import { urlParse } from '@/utils/utils';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';
import StandardTable from '@/components/StandardTable';

const { Description } = DescriptionList;

@connect(({ onebilling, loading }) => ({
  loading: loading.models.onebilling,
  supplierDetail: onebilling.supplierDetail,
  supplierEmployeeDetail: onebilling.supplierEmployeeDetail,
}))
@Form.create()
class ClientInfoDetails extends React.Component {
  state = {
    nowPage: 1,
    pageNum: 10,
    selectedRowKeys: [],
    selectedRows: [],
    onceFeeId: null,
  };

  componentDidMount() {
    const { location, dispatch } = this.props;
    const tempUrl = location.search;
    const { onceFeeId } = urlParse(tempUrl);
    const { nowPage, pageNum } = this.state;
    this.setState({ onceFeeId })
    // 获取详情
    dispatch({
      type: 'onebilling/supplierDetail',
      payload: { onceFeeId },
    });
    this.getList(nowPage, pageNum, onceFeeId);
  }

  // 获取明细
  getList = (currentPage, pageSize, onceFeeId) => {
    const pageArg = {
      currentPage,
      pageSize,
    };
    const { dispatch } = this.props;
    dispatch({
      type: 'onebilling/getSuppDetailList',
      payload: { pageArg, onceFeeId },
    });
  };

  // 返回
  closeDetail = () => {
    router.goBack();
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { onceFeeId } = this.state;
    this.getList(pagination.current, pagination.pageSize, onceFeeId);
  };

  render() {
    const { selectedRowKeys, selectedRows } = this.state;
    const { supplierDetail, loading, supplierEmployeeDetail } = this.props;
    const columns = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '证件类型',
        dataIndex: 'idTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '证件号',
        dataIndex: 'idNo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '收费金额',
        dataIndex: 'feeAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title:
          supplierDetail.pdId === 'PDINF_0000000001' ||
          supplierDetail.pdId === 'PDINF_0000000002' ||
          supplierDetail.pdId === 'PDINF_0000000004' ||
          supplierDetail.pdId === 'PDINF_0000000005'
            ? '个人金额'
            : null,
        dataIndex:
          supplierDetail.pdId === 'PDINF_0000000001' ||
          supplierDetail.pdId === 'PDINF_0000000002' ||
          supplierDetail.pdId === 'PDINF_0000000004' ||
          supplierDetail.pdId === 'PDINF_0000000005'
            ? 'perAmo'
            : null,
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val =>
          supplierDetail.pdId === 'PDINF_0000000001' ||
          supplierDetail.pdId === 'PDINF_0000000002' ||
          supplierDetail.pdId === 'PDINF_0000000004' ||
          supplierDetail.pdId === 'PDINF_0000000005' ? (
            <span>{val === 0 ? 0 : (val && val) || '--'}</span>
          ) : null,
      },
      {
        title:
          supplierDetail.pdId === 'PDINF_0000000001' ||
          supplierDetail.pdId === 'PDINF_0000000002' ||
          supplierDetail.pdId === 'PDINF_0000000004' ||
          supplierDetail.pdId === 'PDINF_0000000005'
            ? '企业金额'
            : null,
        dataIndex:
          supplierDetail.pdId === 'PDINF_0000000001' ||
          supplierDetail.pdId === 'PDINF_0000000002' ||
          supplierDetail.pdId === 'PDINF_0000000004' ||
          supplierDetail.pdId === 'PDINF_0000000005'
            ? 'comAmo'
            : null,
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val =>
          supplierDetail.pdId === 'PDINF_0000000001' ||
          supplierDetail.pdId === 'PDINF_0000000002' ||
          supplierDetail.pdId === 'PDINF_0000000004' ||
          supplierDetail.pdId === 'PDINF_0000000005' ? (
            <span>{val === 0 ? 0 : (val && val) || '--'}</span>
          ) : null,
      },
      {
        title: '服务费',
        dataIndex: 'fee',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '备注',
        dataIndex: 'remark',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && val) || '--',
      },
    ];
    return (
      <PageHeaderWrapper>
        <Card title={<span style={{ fontWeight: 'bolder' }}>基本信息</span>}>
          {+supplierDetail.feeWay === 1 ? (
            <DescriptionList>
              <Description term="产品">{supplierDetail.pdName || '--'}</Description>
              <Description term="收费方式">{supplierDetail.feeWayName || '--'}</Description>
              <Description term="供应商">{supplierDetail.ordSndrName || '--'}</Description>
              <Description term="商务合同">{supplierDetail.custContName || '--'}</Description>
              <Description term="客户">
                {`${supplierDetail.custName}（${supplierDetail.custNo}）` || '--'}
              </Description>
              <Description term="收费总金额">
                {supplierDetail.feeAmo === 0
                  ? 0
                  : (supplierDetail.feeAmo && supplierDetail.feeAmo) || '--'}
              </Description>
              <Description term="业务年月">
                {supplierDetail.busiYm
                  ? `${`${supplierDetail.busiYm}`.substring(0, 4)}-${`${
                      supplierDetail.busiYm
                    }`.substring(4)}`
                  : '--'}
              </Description>
              <Description term="状态">{supplierDetail.feeStaName || '--'}</Description>
              <Description term="编号">{supplierDetail.onceFeeSuppOfflNo || '--'}</Description>
              <Description term="创建时间">
                {(supplierDetail.creTime &&
                  moment(supplierDetail.creTime).format('YYYY-MM-DD HH:mm')) ||
                  '--'}
              </Description>
              <Description term="创建人">{supplierDetail.creName || '--'}</Description>
              <Description term="备注">{supplierDetail.remark || '--'}</Description>
              <Description term="确认收费人员">{supplierDetail.feeUserName || '--'}</Description>
              <Description term="确认收费时间">
                {(supplierDetail &&
                  supplierDetail.feeUserTime &&
                  moment(supplierDetail.feeUserTime).format('YYYY-MM-DD HH:mm')) ||
                  '--'}
              </Description>
            </DescriptionList>
          ) : (
            <DescriptionList>
              <Description term="产品">{supplierDetail.pdName || '--'}</Description>
              <Description term="收费方式">{supplierDetail.feeWayName || '--'}</Description>
              <Description term="供应商">{supplierDetail.ordSndrName || '--'}</Description>
              <Description term="商务合同">{supplierDetail.custContName || '--'}</Description>
              <Description term="客户">{`${supplierDetail.custName}（${supplierDetail.custNo}）` || '--'}</Description>
              <Description term="收费总金额">
                {supplierDetail.feeAmo === 0
                  ? 0
                  : (supplierDetail.feeAmo && supplierDetail.feeAmo) || '--'}
              </Description>
              <Description term="业务年月">
                {supplierDetail.busiYm
                  ? `${`${supplierDetail.busiYm}`.substring(0, 4)}-${`${
                      supplierDetail.busiYm
                    }`.substring(4)}`
                  : '--'}
              </Description>
              <Description term="收费年月">
                {supplierDetail.feeYm
                  ? `${`${supplierDetail.feeYm}`.substring(0, 4)}-${`${
                      supplierDetail.feeYm
                    }`.substring(4)}`
                  : '--'}
              </Description>
              <Description term="状态">{supplierDetail.feeStaName || '--'}</Description>
              <Description term="编号">{supplierDetail.onceFeeSuppOfflNo || '--'}</Description>
              <Description term="创建时间">
                {(supplierDetail.creTime &&
                  moment(supplierDetail.creTime).format('YYYY-MM-DD HH:mm')) ||
                  '--'}
              </Description>
              <Description term="创建人">{supplierDetail.creName || '--'}</Description>
              <Description term="备注">{supplierDetail.remark || '--'}</Description>

              <Description term="确认收费人员">{supplierDetail.feeUserName || '--'}</Description>
              <Description term="确认收费时间">
                {(supplierDetail &&
                  supplierDetail.feeUserTime &&
                  moment(supplierDetail.feeUserTime).format('YYYY-MM-DD HH:mm')) ||
                  '--'}
              </Description>
            </DescriptionList>
          )}
        </Card>
        <Card title={<span style={{ fontWeight: 'bolder' }}>基本信息</span>}>
          <StandardTable
            selectedRows={selectedRows}
            selectedRowKeys={selectedRowKeys}
            rowSelection={null}
            loading={loading}
            data={supplierEmployeeDetail}
            rowKey="onceFeeDetId"
            columns={columns}
            onChange={this.handleStandardTableChange}
          />
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={this.closeDetail}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default ClientInfoDetails;
